<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>easyUpload.js</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bs_switch.css" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/Vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

</head>

<body>
    <div class="container">
        <div class="row" id="abc">
            <div class="col-md-12 ">

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件名称(课件名):</strong></label>
                    <div class="col-md-4">
                        <input class="form-control" id="coursewarename" v-model="coursewarename" type="text" value="" />
                    </div>
                </div>
                <div class="form-group">

                    <div><strong>课程分类:</strong>&nbsp;
                        <select id="course" v-model="selected">
                            <label><option name="course" value="0">请选择</option></label>
                        </select>
                    </div>
                </div>

                <div class="form-group">

                    <div><strong>格式:</strong>&nbsp;
                        <label><input name="format" type="radio" value="1" v-model="formate"/>图文 </label>
                        <label><input name="format" type="radio" value="2" v-model="formate"/>视频 </label>
                        <label><input name="format" type="radio" value="3" v-model="formate"/>音频 </label>
                        <label><input name="format" type="radio" value="4" v-model="formate"/>文件 </label>
                    </div>
                </div>
                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>封面图片:</strong></label>
                    <input class="btn btn-success " type="submit" id="fclick" value="上传图片" />
                    <input class="btn btn-warning " type="reset" value="删除图片" /><br>
                    <input type="file" onchange="change(this)" id="bookImg" name="bookImg"> <br />
                    <img id="upLoadImg" style="height:50px; width: 50px;" v-bind:src="imgUrl" />
                </div>

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件时长(分):</strong></label>
                    <div class="col-md-4">
                        <input class="form-control" id="time" type="text" v-model="time" value="" />
                    </div>
                </div>

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件简介:</strong></label>
                    <div class="col-md-6">
                        <textarea class="form-control" id="description" v-model="description" rows="5">
                        </textarea>
                    </div>
                </div>

                <div class="form-group device-switch switch">
                    <div><strong>可下载:</strong>&nbsp;
                        <label><input name="isDownload" type="checkbox" class="bs_switch" value="1" v-model="isDownload" data-on="启用" data-off="开启" ></label>
                    </div>
                </div>
                <input class="btn btn-success " type="submit" @click="submit()" value="立即提交" />&nbsp;&nbsp;&nbsp;
                <input class="btn btn-default " type="button" value="重置" />
                </form>
            </div>
        </div>
    </div>


    <!-- 上传图片 -->
    <script type="text/javascript">
        function change(img) {
            var file = img.files[0];
            //获取一个指向该元素的地址
            var path = window.URL.createObjectURL(file);
            console.log(path);
            $("#upLoadImg").attr('src', path);

        }

        //js获取
        var inputTag = document.getElementById("bookImg");
        var img = inputTag.files[0];


        $("#fclick").click(function() {
            if ($("#bookImg").val() == '') {
                return;
            }

            //注意这里不能写错。。。
            var file = $("#bookImg")[0].files[0];
            console.log(file);
            var formData = new FormData();
            formData.append("upload", file);
            //对文件类型进行判断
            var index = file.name.lastIndexOf(".");
            var type = file.name.substring(upload);
            if (type != ".jpg" && type != ".png") {
                alert("只能上传jpg和png格式的图片！！");
                return;
            }
            $.ajax({
                url: "/upload/uploadImage",
                data: formData,
                type: "post",
                //这两个属性必须设置！！！！
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.code == 200) {
                        alert("添加成功！")
                    } else {
                        alert("添加失败！")
                    }
                }
            })
        });
    </script>



    <script>
        /**  
         * select元素动态添加option  
         *   
         * @param selectEleId select元素id  
         * @param width 要添加的option的value属性值  
         * @param height 要添加的option的innerHTML  
         * @param selected 是否选中  
         */
        function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
            var selectEle = document.getElementById(selectEleId);
            var optionObj = document.createElement("option");
            optionObj.value = optionValue;
            optionObj.innerHTML = optionInnerHTML;
            optionObj.selected = selected;
            optionObj.name = "course";
            selectEle.appendChild(optionObj);
        }

        var cwid = window.location.href.split("=")[1]; //截取字符串
        new Vue({
            el: "#abc",
            data() {
                return {
                    coursewarename: "",
                    selected: 0,
                    formate: 0,
                    imgUrl: "",
                    time: "",
                    description: "",
                    isDownload: 1,

                };
            },

            mounted() {
                axios.get(
                    "/courseCategory/all", {
                        headers: {}
                    }).then(res => {
                    console.info(res.data)
                    if (res.data.code == 200) {
                        console.info(res.data.data);
                        var data = res.data.data;
                        for (var i = 0; i < data.length; i++) {
                            var id = data[i].categoryId;
                            var name = data[i].categoryName;
                            addOption("course", id, name, false);
                        }
                    } else {
                        alert("失败！")
                    }
                })
                let data = {
                    "cwid": cwid
                }
                axios.post(
                    "/courseware/findCoursewareByCwid", data, {
                        headers: {}
                    }).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        console.log(res.data);
                        this.coursewarename = res.data.data.cwname;
                        this.selected = res.data.data.category;
                        var temp = res.data.data.format
                        if (temp == "mp3") {
                            this.formate = 3;
                        } else if (temp == "png" || temp == "jpg") {
                            this.formate = 1;
                        } else if (temp == "mp4") {
                            this.formate = 2;
                        } else {
                            this.format = 4
                        }
                        this.imgUrl = res.data.data.cover;
                        this.time = res.data.data.duration;
                        this.description = res.data.data.description;
                        this.isDownload = res.data.data.isDownload;
                    }
                });

            },
            methods: {
                submit() {
                    let data = {
                        "cwid": cwid,
                        "cwname": this.coursewarename,
                        "category": this.selected,
                        "cover": this.imgUrl,
                        "duration": this.time,
                        "description": this.description,
                        "isDownload": this.isDownload
                    }
                    axios.post(
                        "/courseware/update", data, {
                            headers: {}
                        }
                    ).then(res => {
                        if (res.data.code == 500) {
                            location.href = "/error/500.html";
                        }
                        if (res.data.code == 200) {
                            layui.use(['layer', 'form'], function() {
                                var layer = layui.layer,
                                    form = layui.form;
                                layer.alert("修改成功")
                            })
                        }
                    })
                },
            }
        })
    </script>
</body>

</html>